﻿<!DOCTYPE html>
<html>
<head>
<title>Gollie - Pay</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <!-- IE 9 needs it -->
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="/Css/jquery-impromptu.min.css" />
<link rel="stylesheet" href="/Css/PayMobile.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(document).bind("mobileinit", function () {
		$.mobile.pushStateEnabled = false;
	});
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-impromptu.min.js"></script>
<script type="text/javascript" src="/Scripts/Gollie.js"></script>
<script type="text/javascript" src="/Scripts/Gollie.string.js"></script>
<script type="text/javascript" src="/Scripts/Gollie.money.js"></script>
<script type="text/javascript" src="/Scripts/Gollie.localstorage.js"></script>
<script type="text/javascript" src="Gollie.pay.js"></script>
<script type="text/javascript" src="Gollie.pay.texts.js"></script>
<script type="text/javascript" src="Gollie.pay.ui.js"></script>
<script type="text/javascript" src="Gollie.pay.ajax.js"></script>
<script type="text/javascript">$(function () { $G.$(); })</script>

</head>
<body>
	<div data-role="page" id="pnlLoading">
	    <img src="ajax-loader.gif" class="fullscreen-centered"/>
	</div>
	<div data-role="page" id="pnlInitial">
		<div class="logo-right"><img src="/Images/Logo100x32.png" /></div>
		<span ID="lblVendorName" class="vendorname"></span>
		<table>
			<tr>
				<td><span>Aangemeld: </span></td>
				<td style="padding-right: 8px;"><span ID="lblCashierName" class="value"></span></td>
				<td><a id="btnChgAccount" href="#" data-role="button">Ander account...</a></td>
			</tr>
		</table>
		<hr />

		<table style="margin-top: 1.0em;">
			<tr>
				<td><span>Klant: </span></td>
				<td colspan="4"><span ID="lblCustomerName" class="value"></span></td>
			</tr>
			<tr>
				<td><span>Saldo: </span></td>
				<td colspan="4"><span ID="lblCredit" class="value"></span></td>
			</tr>
			<tr>
				<td style="width:172px;"><span id="lblNoRefundLabel">Te betalen:</span><div id="pnlDdlPosNeg"><select id="ddlPosNeg"><option value="1">Te betalen: </option><option value="2">Te ontvangen</option></select></div>
				</td>
				<td>&euro;</td>
				<td style="text-align: right;"><input class="amount" maxlength="4" style="width: 72px;" type="tel" ID="tbEuros" placeholder="0"/>
				<td>,</td>
				<td style="text-align: right;"><input class="amount" maxlength="2" style="width: 36px;" type="tel" ID="tbCents" placeholder="00"/>
			</tr>
			<tr>
				<td></td>
				<td colspan="4">
					<a id="btnCheck" href="#" data-role="button">Volgende...</a>
				</td>
			</tr>
		</table>
	</div>

    <div id="pnlConfirm" data-role="page">
		<div class="logo-right"><img src="/Images/Logo100x32.png" /></div>
		<span class="label" id="lblConfirmActionText">Te betalen aan:</span><br />
		<span ID="lblConfirmVendorName" class="vendorname"></span>
		<div class="clear"></div>
		<div style="float:left">
			<div style="float:left">
				<div class="label">Door:</div>
				<div class="value"><span ID="lblConfirmCustomerName"></span></div>
				<div class="clear"></div>
				<div class="label">Bedrag:</div>
				<div class="value"><span ID="lblConfirmAmount" class="value"></span></div>
			</div>
			<div style="float: left; margin-left: 2em; margin-top: -0.6em;">
				<a id="btnDisApprove" href="#" data-role="button">Keur af</a>
			</div>
		</div>
		<div class="clear"></div>
		<div style="margin-top: 1em;">
		<div class="label">Pincode: </div>
		<div class="value"><label id="tbPin0" class="tbPin"></label></div>
		<div class="value"><label id="tbPin1" class="tbPin"></label></div>
		<div class="value"><label id="tbPin2" class="tbPin"></label></div>
		<div class="value"><label id="tbPin3" class="tbPin"></label></div>
		<div class="value">
			<a href="#" id="btnApprove" data-role="button" class="ui-btn-active">Betaal</a>
		</div>
		</div>
		<div class="clear"></div>
		<div class="full"><input class="check-box" type="checkbox" id="cbEmail" checked="checked"/><label for="cbEmail">Stuur mij een bevestigingsemail</label></div>
		<div class="clear"></div>

		<div class="numpad">
			<div class="numpadrow">
				<div class="numpadkey"><button value="1" class="num-key">1</button></div>
				<div class="numpadkey"><button value="2" class="num-key">2</button></div>
				<div class="numpadkey"><button value="3" class="num-key">3</button></div>
			</div>
			<div class="numpadrow">
				<div class="numpadkey"><button value="4" class="num-key">4</button></div>
				<div class="numpadkey"><button value="5" class="num-key">5</button></div>
				<div class="numpadkey"><button value="6" class="num-key">6</button></div>
			</div>
			<div class="numpadrow">
				<div class="numpadkey"><button value="7" class="num-key">7</button></div>
				<div class="numpadkey"><button value="8" class="num-key">8</button></div>
				<div class="numpadkey"><button value="9" class="num-key">9</button></div>
			</div>
			<div class="numpadrow">
				<div class="numpadkey"><button value="C" class="num-key">C</button></div>
				<div class="numpadkey"><button value="0" class="num-key">0</button></div>
				<div class="numpadkey"><button value="D" class="num-key">«</button></div>
			</div>
			<div class="clear"></div>
		</div>

		<div class="clear"></div>

	</div>

	<div id="pnlSucceeded" data-role="page">
		<div class="logo-right"><img src="/Images/Logo100x32.png" /></div>
		<span class="title">De betaling is geslaagd.</span>
		<br />
		<br />
		<span id="lblGotMail">Een bevestiging is per email naar de klant gestuurd.</span>
		<br/>
		<br />
		<span>Sluit a.u.b. dit venster.</span>
	</div>

	<div id="pnlDisapproved" data-role="page">
		<div class="logo-right"><img src="/Images/Logo100x32.png" /></div>
		<span class="title">De klant is NIET akkoord!</span>
		<br />
		<br />
		<span>Sluit a.u.b. dit venster en start de betaalprocedure eventueel opnieuw.</span>
	</div>

	<div id="pnlVendorLogin" data-role="page">
		<div class="logo-right"><img src="/Images/Logo100x32.png" /></div>
		<span class="title">Verkoper login:</span>
		<table>
			<tr>
				<td><span>Gebruikersnaam:</span></td>
				<td><input type="text" id="tbVendorUserName" /></td>
			</tr>
			<tr>
				<td><span>Wachtwoord:</span></td>
				<td><input type="password" id="tbVendorWW" /></td>
			</tr>
			<tr>
				<td></td>
				<td><a id="btnVendorLogin" href="#" data-role="button">Log in</a>
					</td>
			</tr>
		</table>
	</div>

	<div id="pnlErrorNoRetry" data-role="page">
		<span class="title">Oops...er is iets fout gegaan:</span>
		<br />
		<br />
		<span class="error" id="lblErrorMessage"></span>
		<br />
		<br />
		<span>Sluit a.u.b. dit venster en start de procedure eventueel opnieuw.</span>
	</div>

</body>
</html>
